import { useState } from "react";

import { Button, Input, Space } from "antd";
import { MdEditor, Themes, config, UploadImgEvent, UploadImgCallBackParam } from "md-editor-rt";
import "md-editor-rt/lib/style.css";

import "./index.scss";
config({});

const onUploadImg: UploadImgEvent = async (files, callback) => {
  const res = (await Promise.all(
    files.map((file) => {
      return new Promise(() => {
        const form = new FormData();
        form.append("file", file);
      });
    })
  )) as UploadImgCallBackParam;

  callback(res);
};
// type themeType = "default" | "github" | "vuepress" | "mk-cute" | "smart-blue" | "cyanosis";
type CodeTheme = "atom" | "a11y" | "github" | "gradient" | "kimbie" | "paraiso" | "qtcreator" | "stackoverflow";

export default function WebEditor() {
  const [mdValue, setMdValue] = useState("hello world");
  const [articleTitle, setArticleTitle] = useState("");

  const [theme] = useState<Themes>("light");
  const [codeTheme] = useState<CodeTheme>("atom");

  return (
    <section className='editor-container'>
      <section className='editor-header'>
        <section className='editor-input'>
          <input
            placeholder='请输入文章标题...'
            value={articleTitle}
            onChange={(e) => setArticleTitle(e.target.value)}
          ></input>
        </section>
        <section className='editor-tool'>
          <Space>
            <Button type='text' size='large' disabled={true}>
              {" "}
              保存成功
            </Button>
            <Button type='primary' ghost size='large'>
              草稿箱
            </Button>
            <Button type='primary' size='large'>
              发布
            </Button>
          </Space>
        </section>
      </section>
      <MdEditor
        className='editor-editor'
        modelValue={mdValue}
        onChange={setMdValue}
        theme={theme}
        onUploadImg={onUploadImg}
        codeTheme={codeTheme}
      />
    </section>
  );
}
